import React, { memo } from "react";
import { Divider, Typography } from "antd";
import { FilterTag } from "./FilterTags";
interface PropsType {
  title: string;
  tags: string[];
}
const Filter = memo<PropsType>(({ title, tags }) => {
  return (
    <div style={{ margin: "20px 0px", paddingLeft: "20px" }}>
      <Typography.Text
        style={{ marginRight: 40, fontSize: 15, fontWeight: 500 }}
      >
        {title}:{" "}
      </Typography.Text>
      {tags.map((t, index) => {
        if (index === tags.length - 1)
          return <FilterTag key={`filter${index}`}>{t}</FilterTag>;
        return (
          <span key={`filter${index}`}>
            <FilterTag>{t}</FilterTag>
            <Divider type="vertical" />
          </span>
        );
      })}
    </div>
  );
});

export default Filter;
